<template>
  <!-- <gldelbtn :show="isShow" :text='text' @cancel="canceled"  @determine='defineCallback' ></gldelbtn> -->
  <div class="gldelbtn">
    <el-dialog title="操作确认"
               :visible.sync="show"
               width='450px'
               @close="cancel">
      <div class="delInfo">
        <p><i class="el-icon-warning pr10"></i>确定从系统中删除“<span>{{text}}</span>”？</p>
      </div>
      <div class="vCodeInfo">
        <el-input placeholder="请输入验证码"
                  v-model="vCode"
                  clearable
                  class="vCode">
        </el-input>
        <img :src="codeUrl" @click="replace">
      </div>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary"
                   @click="defineCallback">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import config from '@/config/config'
export default {
  name: 'Gldelbtn',
  props: {
    show: {
      // 控制显示与隐藏
      type: Boolean,
      default: false
    },
    text: {
      // 显示文本
      type: String,
      default: ''
    }
  },
  components: {},
  data() {
    return {
      codeUrl: '', // 图片
      code: '', // 验证码值
      vCode: '' // input输入值
    }
  },
  computed: {},
  watch: {
    show() {
      if (this.show) {
        this.vCode = ''
        this.getCode()
      }
    }
  },
  methods: {
    // 请求验证码
    getCode() {
      this.http
        .$post('opening/api/get_codes', {
          width: 113,
          height: 38
        })
        .then(res => {
          //   console.log(res)
          this.codeUrl = config.api_url + res.codeurl
          this.code = res.codes
        })
    },
    // 确定
    defineCallback() {
      let code = this.code.toLowerCase()
      let vCode = this.vCode.toLowerCase()
      this.$emit('determine', code, vCode)
    },
    // 关闭
    cancel() {
      //   console.log('closeed', this.Show)
      this.$emit('cancel')
    },
    // 更换验证码
    replace(){
        this.getCode();
    }
  },
  created() {},
  mounted() {}
}
</script>
<style lang='less' scoped>
.delInfo {
  font-size: 16px;
  font-weight: bold;
  color: #666;
}
.vCodeInfo {
  padding-top: 20px;
  .vCode {
    width: 240px;
    height: 40px;
    vertical-align: middle;
    padding-right: 10px;
  }
  img {
    width: 113px;
    height: 38px;
    vertical-align: middle;
  }
}
</style>